<style>
	.container-div {
		text-align: center;
		padding: 0px 28px;
		height: 400px;
	}
	.iblock {
		display: inline-block;
		height: 100%;
		width: 0;
		vertical-align: middle;
	}
	.box-child {
		padding: 10px;
	}
</style>
<% layout('/layouts/default.html', {title: '流程追踪', libs: ['dataGrid']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-child">
			<div class="form-unit">${text('审批进度')}</div>
			<#form:form model="${historicActivity}" method="post" class="form-horizontal"></#form:form>
			<div class="box-body">
				<div class="container-div">
					<img alt="流程暂未发起" src="">
					<i class="iblock"></i>
				</div>
			</div>
		</div>
		<div class="box-child">
			<div class="form-unit">${text('审批记录')}</div>
			<div class="box-body" style="padding: 0 30px;">
				<table id="dataGrid"></table>
			</div>
		</div>
	</div>
</div>
<% } %>
<script src="${ctxStatic}/activiti.6.0/js/activiti.js"></script>
<script>
	var instanceId = [[${historicActivity.instanceId}]];
	$(function () {
		var url =  '${ctx}/flow/process/read-resource?pProcessInstanceId=' + instanceId;
		$('img').attr('src', url);
	});
	//# // 初始化DataGrid对象
	$('#dataGrid').dataGrid({
		url: "${ctx}/flow/process/listHistory?instanceId="+instanceId,
		columnModel: [
			{header:'${text("环节名称")}', name:'activityName', width:150, align:"center"},
			{header:'${text("创建时间")}', name:'startTime', width:150, align:"center"},
			{header:'${text("完成时间")}', name:'endTime', width:150, align:"center"},
			{header:'${text("任务历时")}', name:'durationInMillis', width:180, align:"center",formatter: function(value, row, index) {
				if (!value) return '未知';
				return formatTotalDateSub(value / 1000);
			}},
			{header:'${text("处理人")}', name:'assigneeName', width:120, align:"center"},
			{header:'${text("审批意见")}', name:'comment', width:330, align:"left"},
		],
		//# // 加载成功后执行事件
		ajaxSuccess: function(data){

		}
	});
</script>